<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { message } from '~/composables/useNotify';
import { useAppStore } from '~/stores/app';
import { EventBusNames } from '~/types/enums';
import { appEventBus } from '~/utils/event-bus2';

const { t } = useI18n()

import StatisticsInfo from '../_components/header-info.vue';
import rebateDetail from '../_components/rebate-detail.vue';
import RebateList from '../_components/rebate-list.vue';
const { isLogin, userInfo } = storeToRefs(useAppStore())

definePageMeta({
  layout: 'header-back',
  title: '实时返水'
});

const rebateSumData = ref<any>([])
  const showDetail = ref(false)
  const detailData = ref<any>([])
const { runAsync: runAsyncRebateSum, loading: loadingRebateSum, data: rebateSum } = useRequest(ApiMemberRebateSum)
const { runAsync: runAsyncRebateApply, loading: loadingRebateApply } = useRequest(ApiMemberRebateApply)
onMounted(() => {
  runAsyncRebateSum()
})

watch(
  () => userInfo.value?.username,
  (newVal) => {
    if (newVal) {
      runAsyncRebateSum()
    }
  },
  { immediate: true }
)

const formattedTableData = computed(() => {
  if (!rebateSum.value) return []
  return rebateSum.value.map((item: any) => ({
    currency: item.currency_id,
    game_type: item.game_type,
    bet_amount: Number(item.valid_bet_amount),
    rebate_amount: Number(item.rebate_amount)
  }))
})

function applyRebate() {
  if (rebateSum.value?.length) {
    runAsyncRebateApply().then((res) => {
      rebateSum.value = []
      appEventBus.emit(EventBusNames.GET_TIIMEREBATE_SUCCESS)
      if (res && res.length && Array.isArray(res)) {
        close()
        // message.success(t('rebate_success_notify'))
        message.success(res.map(d => ({ currency: d.currency_id, amount: d.rebate_amount })).join(', '))
      }
      else {
        message.success(t('rebate_success_label'))
      }
    })
  }
  else {
    message.error(t('vip_no_gift_available'))
  }
}

function goDetail(detail: any){
  showDetail.value = true
  detailData.value = detail
}

</script>

<template>
  <div class="betrayal-bg">
    <div class="betrayal-modal">
      <StatisticsInfo :username="userInfo?.username || ''" />
      <div class="betrayal-table-wrapper">
        <template v-if="!showDetail">
          <RebateList :table-data="formattedTableData || []" @detail="goDetail" />
          <button class="betrayal-action" @click="applyRebate">一键返水</button>
        </template>
        <template v-else>
          <rebateDetail :table-data="detailData" />
          <BaseButton class="back-btn" @click="showDetail = false">{{ t('back') }}</BaseButton>
        </template>
      </div>
    </div>
  </div>
</template>

<style scoped>
.betrayal-bg {
  background: #222;
}
.betrayal-modal {
  background: #232626;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 0 0 32px 0;
  color: #fff;
  border-radius: 0 0 12px 12px;
}
.header {
  display: flex;
  align-items: center;
  background: #323738;
  padding: 0 0 0 8px;
  height: 56px;
  border-radius: 0 0 8px 8px;
}
.back-btn {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  margin-right: 8px;
  display: flex;
  align-items: center;
  height: 40px;
}
.title {
  flex: 1;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  margin-right: 32px;
}
.user-info {
  display: flex;
  align-items: center;
  background: #232626;
  padding: 16px 0 8px 16px;
}
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
}
.nickname {
  font-size: 16px;
  font-weight: 600;
}
.betrayal-table-wrapper {
  background: #323738;
  border-radius: 12px;
  margin: 0 16px;
  margin-top: 8px;
  padding: 16px 14px;
}
.betrayal-table {
  width: 100%;
  border-collapse: collapse;
  color: #fff;
}
.betrayal-table th, .betrayal-table td {
  text-align: center;
  padding: 8px 0;
}
.betrayal-table th {
  color: #B3BEC1;
  font-weight: 500;
  background: #232626;
}
.betrayal-table tr {
  border-bottom: 1px solid #323738;
}
.betrayal-table tr:last-child {
  border-bottom: none;
}
.orange {
  color: #FFA726;
  font-weight: 600;
}
.betrayal-action {
  display: block;
  width: 92%;
  margin: 24px auto 0 auto;
  padding: 12px 0;
  border: none;
  border-radius: 8px;
  background: linear-gradient(90deg, #24EE89 0%, #9FE871 100%);
  color: #111;
  cursor: pointer;
  box-shadow: 0px -2px 0px 0px #1DCA6A inset, 0px 0px 12px 0px rgba(35, 238, 136, 0.30);
  color: var(---black-hsl-0000000, #000);

  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 18px; /* 150% */
}
</style>
